<template>
<div class="cart">
  <h4>全部商品</h4>
  <div class="cart-main">
    <div class="cart-th">
      <p style="width: 5%">全部</p>
      <p style="width: 30%">商品</p>
      <p style="width: 23%">单价(元)</p>
      <p style="width: 12%">数量</p>
      <p style="width: 25%">小计(元)</p>
      <p style="width: 5%">操作</p>
    </div>
    <div class="cart-body">
      <ul v-for="(InfoList,index) in cartInfoList" :key="InfoList.id">
        <li><input type="checkbox"  :checked="InfoList.isChecked==1" @change="updateChecked(InfoList,$event)"/></li>
        <li>
          <img :src="InfoList.imgUrl"/>
          <p style="display: inline-block">
            {{ InfoList.skuName }}
          </p>
        </li>
        <li style="font-size: 12px">{{ InfoList.skuPrice.toFixed(2)}}</li>
        <li>
          <a href="javascript:void(0)" @click="changeNumber('minus',-1,InfoList)">-</a>
          <input type="text" :value="InfoList.skuNum" @change="changeNumber('change',$event.target.value,InfoList)"/>
          <a href="javascript:void(0)" @click="changeNumber('add',1,InfoList)">+</a>
        </li>
        <li style="font-size: 16px">{{ InfoList.skuPrice}}</li>
        <li>
          <a href="javascript:void(0)" @click="deleteCart(InfoList.skuId)">删除</a>
          <a href="javascript:void(0)">移到收藏</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="cart-tool">
    <div class="select-all">
      <input type="checkbox" :checked="changeAllChecked&&(cartInfoList.length>0)" @change="updateAllChecked($event)"/>
      <span>全选</span>
    </div>
    <div class="options">
      <a href="javascript:void(0)" @click="deleteAllChecked">删除选中的商品</a>
      <a href="javascript:void(0)">移到我的关注</a>
      <a href="javascript:void(0)">清除下柜商品</a>
    </div>
    <div class="money-box">
      <span>已选择6件商品</span>
      <span>总结(不含运费)&nbsp;&nbsp;&nbsp;&nbsp;:</span>
      <span>{{totalPrice}}</span>
      <a href="javascript:void(0)" @click="$router.push('/trade')">结算</a>
    </div>
  </div>
</div>
</template>

<script>
import {mapGetters} from 'vuex'
import throttle from 'loadsh/throttle'
import Header from "../../components/header";
export default {
  name: "shopCartList",
  components: {Header},
  mounted(){
    this.getDate()
  },
  methods:{
    async deleteAllChecked(){
    try {
      await this.$store.dispatch('deleteAllChecked')
      this.getDate()
    }catch (error){
      alert(error.message)
    }
    },
    async updateAllChecked(event){
      let isChecked=event.target.checked?'1':'0'
      try {
        await this.$store.dispatch('updateAllChecked',isChecked)
        this.getDate()
      }catch (error){
        alert(error.message)
      }
    },
    async updateChecked(list,event){
      try {
        let isChecked = event.target.checked ? '1' : '0'
        await this.$store.dispatch('changeChecked', {skuId: list.skuId, isChecked: isChecked})
        this.getDate()
      }catch (error){
        alert(error.message)
      }
    },
    deleteCart(skuId) {
      this.$store.dispatch('deleteCart',skuId)
      this.getDate()
    },
    getDate(){
      this.$store.dispatch('getCartList')
    },
   changeNumber:throttle(async function (type,value,id){//节流操作
      switch (type) {
        case 'minus':
          value = id.skuNum > 1 ? -1 : 0
          break
        case 'add':
          value = 1
          break
        case 'change':
          value=(isNaN(value)||value<1)?0:parseInt(value-id.skuNum)
          break
      }
      console.log(value)
      try{
        await this.$store.dispatch('addOrderUpdateShopCart',{skuId:id.skuId,skuNum:value})
        this.getDate()
      }catch(error){
      }
    },1000)
  },
  computed: {
    ...mapGetters(['getCartInfoList']),
    cartInfoList() {
      return this.getCartInfoList.cartInfoList||[]
    },
    changeAllChecked(){
      return this.cartInfoList.every(item=>item.isChecked===1)//遍历数组,只要一个不满足条件返回false
    },
    totalPrice(){
      let total=0
        for(let i=0;i<this.cartInfoList.length;i++){
          total+=this.cartInfoList[i].cartPrice*this.cartInfoList[i].skuNum
        }
        return total
    }
    }
}
</script>

<style scoped lang="less">
.cart-tool{
  border: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .select-all{
    font-size:12px;
    color:rgb(51, 51, 51);
    input{
      margin-left: 10px;
    }
  }
  .options{
   a{
     padding: 0 10px;
     font-size:12px;
     color: #666;
     margin-right: 10px;
   }
  }
  .money-box{
    span{
      padding: 0 10px;
      font-size:12px;
      color: #666;
    }
    span:nth-child(3){
      color:rgb(200, 22, 35);
      font-size: 16px;
    }
    a{
      margin-left:70px;
      display: inline-block;
      color: #fff;
      text-align: center;
      line-height: 54px;
      height: 54px;
      width: 96px;
      background-color:rgb(225, 37, 27)
    }
  }
}
img{
  height: 82px;
  width: 82px;
  line-height: 20px;
}
h4{
  margin: 9px 0;
  font-size: 14px;
}
.cart{
  width: 1200px;
  margin: 0 auto;
  .cart-th{
p{
  display: inline-block;
  text-align: center
}
    border: 1px solid #ddd;
    background: #f5f5f5;
    padding: 10px;
    color:rgb(51, 51, 51);
    font-size: 12px;
  }
  .cart-body{
    margin: 15px 0;
    border: 1px solid #ddd;
ul{
  padding: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  li:nth-child(4){
    overflow: hidden;
    border: 1px solid #ddd;
   a{
     border-top: 1px solid #ddd;
     padding:8.8px 8px;
     color: #666;
   }
    a:nth-child(1){
      border-right: none;
    }
    a:nth-child(3){
      border-left:none;
    }
    input{
      width: 42px;
      height: 37px;
      border: 1px solid #ddd;
      text-align: center;
    }
  }
  li:last-child{
    font-size: 12px;
   a{
     color:#666!important;
     display: block;
   }
  }
  li{
    p{
      width: 150px;
      height: 90px;
      font-size: 12px;
    }
  }
}
  }
}
</style>
